<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            姓名: <input type="text" name="" id="" v-model="uname">
        </div>
        <div>
            密码: <input type="password" name="" id="" v-model="pwd">
        </div>
        <div>
            性别：
            <input type="radio" name="sex" id="" value="1" v-model="sex">男
            <input type="radio" name="sex" id="" value="0" v-model="sex">女
        </div>
        <div>
            职业
            <select name="" id="" v-model="job" multiple>
                <option value="" disabled>--请选择--</option>
                <option value="1">医生</option>
                <option value="2">律师</option>
                <option value="3">工程师</option>
            </select>
        </div>
        <div>
            爱好
            <input type="checkbox" name="" id="" value="travel" v-model="hobby">旅游
            <input type="checkbox" name="" id=""  value="friend" v-model="hobby">交友
            <input type="checkbox" name="" id=""  value="music" v-model="hobby">音乐
            <input type="checkbox" name="" id=""  value="handwriting" v-model="hobby">书法
        </div>
        <div>
        <input type="checkbox" name="" id="" v-model="isChecked">同意该协议
        </div>
        <div>
            个人简介
            <textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea>
        </div>
        <p>
            {{ uname }}
            {{ pwd }}
            {{ sex }}
            {{ job }}
            {{ hobby }}
            {{ isChecked }}
            {{ desc }}
        </p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 定义数据
            data: {
                uname: '',
                pwd: '',
                sex: 0,
                job: 1,
                hobby: ['travel'],
                isChecked: true,
                desc: ''
            }
        })
    </script>
</body>
</html>